<template>
  <view class="warp safety">
    <navigator
      class="download_app"
      :url="'/pages/web_view/web_view?url=' + res.url"
      >下载众商app</navigator
    >
    <view class="content" ref="content">
      <canvas
        style="width: 100%; height: 100%"
        canvas-id="firstCanvas"
        id="firstCanvas"
      ></canvas>
    </view>
    <view class="bottom_warp flex_c" @click="myimg(ip)"> 保存到手机 </view>
  </view>
</template>

<script>
import {
  distributionCoreMyTeamInvite,
  weiXinMinAppGetUnlimited,
} from "@/api/common";
import { mapState } from "vuex";
export default {
  data() {
    return {
      imgUrl: "",
      res: {},
      ip: {},
    };
  },
  computed: {
    ...mapState("user", ["user"]),
  },
  async onLoad() {
    const res = await distributionCoreMyTeamInvite();
    const result = await weiXinMinAppGetUnlimited({
      type: 1,
    });
    this.imgUrl = result.data;
    this.res = res;
    Promise.all([res, result]).then(() => {
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        let h;
        let w;
        query
          .select(".content")
          .boundingClientRect((data) => {
            h = data.height - 50;
            w = data.width;
          })
          .exec();
        let l = 100;
        const user = this.user;
        const ctx = uni.createCanvasContext("firstCanvas");
        // ctx.drawImage(res.imgUrl, 0, 0, w, h);
        // ctx.drawImage(this.user.avatarUrl, 20, 20, l, l, l, l);
        ctx.drawImage(this.imgUrl, 20, 20, l, l, l, l);
        ctx.setFontSize(20);
        ctx.setFillStyle("#fff");
        const word = user.nickName + "  " + "分享给您";
        ctx.fillText(word, l + 40, 20 + l / 2);

        // ctx.arc(w - l - 20, h - 20 - l, l, 0, 2 * Math.PI);
        ctx.drawImage(this.imgUrl, w - l - 20, h - 20 - l, l, l, l, l);
        ctx.draw();

        setTimeout(() => {
          uni.canvasToTempFilePath({
            canvasId: "firstCanvas",
            success: (res) => {
              let tempFilePath = res.tempFilePath;
              this.ip = tempFilePath;
            },
            fail: function (res) {
              console.log(res);
            },
          });
        }, 1500);

        // ctx.draw(
        //   false,
        //   (() => {
        //     const _this = this;
        //     setTimeout(() => {
        //       uni.canvasToTempFilePath(
        //         {
        //           canvasId: "myCanvas",
        //           destWidth: w * 2, //分享图片尺寸=画布尺寸1*缩放比0.5*像素比2
        //           destHeight: h * 2,
        //           quality: 1,
        //           fileType: "jpg",
        //           success: (res) => {
        //             uni.canvasToTempFilePath(
        //               {
        //                 canvasId: "myCanvas",
        //                 destWidth: w * 2, //展示图片尺寸=画布尺寸1*像素比2
        //                 destHeight: h * 2,
        //                 quality: 1,
        //                 fileType: "jpg",
        //                 success: (res) => {
        //                   const img = res.tempFilePath;
        //                   this.ip = img;
        //                 },
        //               },
        //               _this
        //             );
        //           },
        //         },
        //         _this
        //       );
        //     }, 500);
        //   })()
        // );

        // ctx.draw(true, (rest) => {
        //   // draw方法 把以上内容画到 canvas 中。
        //   console.log(rest, "走到了这里");
        //   uni.showToast({
        //     icon: "success",
        //     mask: true,
        //     title: "绘制完成",
        //   });
        //   // 这里因为我们项目是需要 全屏保存的  所以  x y  的参数都是0
        //   uni.canvasToTempFilePath({
        //     // 保存canvas为图片  uni 官方api文档
        //     x: 0,
        //     y: 0,
        //     fileType: "png",
        //     width: w,
        //     height: h,
        //     destWidth: w, //  如果保存到手机比较模糊 改这里 一般*2 即可解决
        //     destHeight: h,
        //     //  如果保存到手机比较模糊 改这里 一般*2 即可解决
        //     canvasId: "firstCanvas",
        //     quality: 1,
        //     success: (res) => {
        //       // 在H5平台下，tempFilePath 为 base64
        //       console.log(res, "回调成功");
        //       this.ip = res.tempFilePath;
        //       // this.conserve(res.tempFilePath);
        //       console.log(res.tempFilePath, "//要保存的文件路径");
        //     },
        //   });
        // });
      });
    });
  },
  methods: {
    myimg(ip) {
      console.log(ip);
      // #ifndef H5
      uni.saveImageToPhotosAlbum({
        filePath: ip,
        success: function () {
          console.log("save success");
        },
      });
      // #endif
    },

    conserve(ip) {
      uni.saveImageToPhotosAlbum({
        filePath: ip, //返回的临时路径
        success: function (res2) {
          console.log(res2, "临时");
          uni.showToast({
            title: "保存成功",
            icon: "none",
          });
        },
        fail: function () {
          uni.showToast({
            title: "保存失败，请稍后重试",
            icon: "none",
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.warp {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  .download_app {
    width: 100%;
    height: 44px;
    line-height: 44px;
    font-size: 36upx;
    font-weight: 500;
    padding: 0 30upx;
    background: #ccc;
    flex-shrink: 0;
  }
  .content {
    flex: 1;
    background: red;
  }
  .bottom_warp {
    width: 100%;
    height: 50px;
    flex-shrink: 0;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9;
    background: #fff;
  }
}
</style>
